<template>
	<view class="createAiPersonTips bg-white">
		<video id="defaultAI" :src="aiVideoSrc" poster="@/static/white.png" @ended="videoPlayEndedEvent" autoplay
			:controls="false" object-fit="cover" style="height: 100vw;width: 100vw;"></video>
		<view class="mt-20 ml-20">
			<u-steps current="3" direction="column" dot iconSize="25">
				<u-steps-item title="生成数字人形象" desc="上传照片，编辑自我简介内容,制作名片" style="margin-bottom: 100rpx;">
				</u-steps-item>
				<u-steps-item title="创建客服智能体" desc="配置AI模型，建立知识库，创建智能体"></u-steps-item>
				<u-steps-item title="跟进获客线索" desc="分享传播数字人，获取销售线索"></u-steps-item>
			</u-steps>
		</view>
		<view class="createAiPersonTips-btnList flex justify-center">
			<view class="createAiPersonTips-btnList-btn">
				<u-button @click="createAiBtnClick" text="创建数字人" type="primary" shape="circle" size="large"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/api/api";
	export default {
		data() {
			return {
				aiVideoSrc: "https://sadtalker.oss-cn-hangzhou.aliyuncs.com/ai1.mp4",
				aiVideoSpeakSrc: "https://sadtalker.oss-cn-hangzhou.aliyuncs.com/ai1.mp4",
				aiVideoMuteSrc: "https://sadtalker.oss-cn-hangzhou.aliyuncs.com/ai1Mute.mp4",
				poster: "https://sadtalker.oss-cn-hangzhou.aliyuncs.com/sales2.png",
				videoContext: null,
				muteCount: 0,
				muteSeconds: 2, // 10秒的倍数
			};
		},
		components: {},
		props: {},
		computed: {},
		onReady() {
			this.videoContext = uni.createVideoContext("defaultAI");
			this.aiVideoSrc = this.aiVideoSpeakSrc;
		},
		onLoad() {
		},
		mounted() {},
		onShow() {},
		methods: {
			videoPlayEndedEvent() {
				if (this.muteCount < this.muteSeconds) {
					this.aiVideoSrc = this.aiVideoMuteSrc;
					this.muteCount++;
				} else {
					this.aiVideoSrc = this.aiVideoSpeakSrc;
					this.muteCount = 0;
				}
				this.videoContext.play()
			},
			createAiBtnClick() {
				uni.navigateTo({
					url: "/pages/aiPerson/createAiPersonStepOne"
				})
			}
		}
	};
</script>

<style lang="less" scoped>
	.createAiPersonTips {
		height: 100vh;

		&-btnList {
			width: 100vw;
			position: fixed;
			bottom: env(safe-area-inset-bottom);

			&-btn {
				width: 95vw;
			}
		}
	}

	::v-deep .u-steps-item {
		min-height: 100px;
	}

	::v-deep .u-steps-item .u-text {
		flex: 0;
		align-items: start;
	}

	::v-deep .u-steps-item .u-text__value {
		align-items: start;
	}

	::v-deep .u-steps-item__line {
		height: 100px;
	}
</style>